.clearfix {
    display: block;
}

.box {
    background: url(../img/VIP.png) no-repeat center;
    width: 100%;
    height: 100%;
    background-size: 100% auto; /* padding-top: .4rem;*/
}

.vip_a {
    padding-top: .15rem;
}

.vip_t {
    background: url(../img/vip_t.png) no-repeat center;
    width: 3.55rem;
    height: 1.24rem;
    padding-top: .55rem;
    background-size: 3.55rem auto;
    margin: 0 auto;
}

.progress {
    margin: 0 .15rem;
    height: .12rem;
    background-color: #2a3863;
    border-radius: .1rem;
    position: relative;
}

.progress_bar {
    position: absolute;
    height: .12rem;
    width: 70%;
    background: linear-gradient(to right, #f5a058, #fe375c);
    border-radius: .1rem;
}

.progress_bar i {
    position: absolute;
    width: .1rem;
    height: .1rem;
    background-color: #fff;
    right: .01rem;
    top: .01rem;
    border-radius: .1rem;
}

.progress_bar span {
    position: absolute;
    right: -.16rem;
    top: -.32rem;
    background: url(../img/title.png) no-repeat center;
    width: .44rem;
    height: .28rem;
    line-height: .27rem;
    text-align: center;
    color: #fff;
    font-size: .12rem;
    background-size: .44rem auto;
}

.vip {
    height: .95rem;
}

.vip ul li {
    float: left;
    /*width: 25% !important;
    margin: 0 auto;*/
}

.vip ul li.vip1 {
    background: url(../img/vip1.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
    margin-left: 0.17rem;
}

.vip ul li.vip2 {
    background: url(../img/vip2.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.vip ul li.vip3 {
    background: url(../img/vip3.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.vip ul li.vip4 {
    background: url(../img/vip4.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.vip ul li.vip1_pre {
    background: url(../img/vip1_pre.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.vip ul li.vip2_pre {
    background: url(../img/vip2_pre.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.vip ul li.vip3_pre {
    background: url(../img/vip3_pre.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.vip ul li.vip4_pre {
    background: url(../img/vip4_pre.png) no-repeat center;
    width: .805rem;
    height: .95rem;
    margin-top: .1rem;
    background-size: .805rem auto;
}

.table {
    width: 3.35rem;
    padding: 0.10rem;
    margin: 0.10rem auto;
    background: #fff;
    border-radius: 0.100rem;
}

.table img {
    display: block;
    width: 3.35rem;
}

.progress .line {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 0.015rem;
    height: 0.12rem;
    background: #4b5b8f;
}
.progress .line1{
    left: 0.81rem;
}
.progress .line2{
    left: 1.62rem;
}
.progress .line3{
    left: 2.43rem;
}

.vip_a .novip {
    position: relative;
    background: url(../img/novip.png) no-repeat center;
    width: 3.55rem;
    height: 1.24rem;
    padding-top: .55rem;
    background-size: 3.55rem auto;
    margin: 0 auto;
}
.vip_a .novip .a_btn {
    display: inline-block;
    position: absolute;
    top: 1.05rem;
    left: 1.0rem;
    width: 1.54rem;
    height: 0.45rem;
}
